<template>
  <div class="search">
    <header-top>
      <a class="header_left" slot="left" @click="$router.back()">
        <img src="../../assets/images/icon_fanhui.png" style="width: 12px; height: 20px;"/>
      </a>
      <a class="header_center" slot="center">
        <div class="serach_input_box">
          <img class="img_sousou" src="./images/icon_sousuo.png"/>
          <img class="img_fengexian" src="./images/bg_fengexian.png"/>
          <input class="serach_input_box_input" v-model="serachValue" placeholder="输入美发店、发型师" @focus='handShowHitory(true)' @blur="handShowHitory(false)"/>
        </div>
      </a>
      <a class="header_right" slot="right" @click="handSearch(serachValue)">
        搜索
      </a>
    </header-top>
    <div class="serach_item" v-show="showHistoryItem && historyList.length>0">
      <flexbox>
        <flexbox-item :span="12">
          <div class="serach_item_history search_item_history_text">
            搜索历史
            <img src="../../assets/images/icon_del.png" @click="clearHitory"/>
          </div>
        </flexbox-item>
      </flexbox>
      <p class="line"/>
      <div v-for="(item,index) in historyList" :key="index">
        <flexbox>
          <flexbox-item @click.native="handSearch('item.name')" :span="12">
            <div class="serach_item_history">
              {{item.name}}
            </div>
          </flexbox-item>
        </flexbox>
        <p class="line"/>
      </div>
    </div>
  </div>
</template>

<script>
  import {Flexbox, FlexboxItem} from 'vux'
  import HeaderTop from '../../components/HeaderTop/HeaderTop'

  export default {
    name: "Search",
    components: {
      HeaderTop,
      Flexbox,
      FlexboxItem
    },
    data() {
      return {
        serachValue: '',
        showHistoryItem: false,
        historyList: [{name: '经典发艺店'}, {name: '发型师'}]
      }
    },
    methods: {
      handSearch(value) {
        let {historyList} = this;
        //将新的搜索值添加到搜索历史中
        let flag = true;
        historyList.map(item => {
          let name = item.name;
          if (value == name) {
            flag = false;
            return;
          }
        });
        if (flag) {
          historyList.unshift({name: value});
        }
        this.historyList = historyList;
      },
      clearHitory() {
        this.historyList = [];
        this.serachValue = '';
      },
      handShowHitory(value) {
        setTimeout(() => {
          this.showHistoryItem = value;
        }, 100);
      }
    }
  }
</script>

<style scoped>
  .serach_input_box {
    background-color: #fff;
    margin-left: -15%;
    border-radius: 3px;
  }

  .serach_input_box_input {
    height: 30px;
    border-radius: 3px;
    text-indent: 55px;
  }

  .serach_item {
    margin-top: 48px;
    background-color: #fff;
  }

  .search_item_history_text {
    color: #a0a0a0;
    font-size: 12px;
  }

  .search_item_history_text img {
    width: 18px;
    height: 18px;
    float: left;
    right: 20px;
    top: 58px;
    position: absolute;
  }

  .serach_item_history {
    margin: 15px;
  }

  .img_sousou {
    width: 18px;
    height: 20px;
    float: left;
    position: absolute;
    left: -20px;
    top: 5px;
  }

  .img_fengexian {
    height: 30px;
    width: 1px;
    float: left;
    position: absolute;
    left: 10px;
    top: 0px;
  }

  input {
    width: 110%;
    border: none;
    outline: none;
  }

  input:hover {
    border: none;
    outline: none;
  }

  input:focus {
    outline: none;
  }
</style>
